<template>
    <div id="blogEditor">
        <el-form :model="blogMain" label-width="auto">
            <el-row gutter="20">
                <el-col :span="8">
                    <el-form-item label="标题">
                        <el-input v-model="blogMain.title" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="技术点">
                        <el-input v-model="blogMain.keyPoint" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="博客类型">
                        <el-select v-model="blogMain.type" placeholder="请选择">
                            <el-option
                                    v-for="blogType in blogTypes"
                                    :key="blogType.name"
                                    :label="blogType.name"
                                    :value="blogType.kid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row id="editorBody">
                <div ref="toolbar" id="toolbar"></div>
                <div ref="editor" id="editor"></div>
            </el-row>
            <!--            <div id="editorBody">-->
            <!--                <div ref="toolbar" id="toolbar"></div>-->
            <!--                <div ref="editor" id="editor"></div>-->
            <!--            </div>-->


            <el-row class="ap">
                <el-col :span="9">
                    <el-form-item label="签名">
                        <el-input id="author" v-model="blogMain.author" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="密钥">
                        <el-input id="password" v-model="blogMain.password" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" @click="submitBlog($event)">提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </div>
</template>

<script>
    import E from 'wangeditor'
    import Vue from 'vue'

    export default {
        name: "BlogEditor",
        data() {
            return {
                editor: null,
                blogMain: {
                    type: '',
                    main: '',
                    title: '',
                    keyPoint: '',
                    author: '',
                    password: ''
                },
                blogTypes: [{kid: '', name: '', blogSize: ''}],
                mainPage:''
            }
        },
        methods: {
            createEditor() {
                Vue.axios.get('http://localhost:8500/blogMain/getFakeDetail',{
                    params:{}
                }).then(res=>{
                    this.blogMain=res.data;
                    console.log("blogmain:",this.blogMain.main);
                    this.editor = new E(this.$refs.toolbar, this.$refs.editor);
                    this.editor.create();
                    console.log("*/*/*/*/*/*/*"+this.blogMain.main)
                    this.editor.txt.append(this.blogMain.main)
                }).catch(err=>{
                    console.log(err)
                })

            },
            submitBlog(event) {
                event.preventDefault();
                this.blogMain.main = this.editor.txt.html();

                Vue.axios.post(`http://localhost:8500/blogMain/admin/addBlog?author=${this.blogMain.author}&password=${this.blogMain.password}`, this.blogMain).then(res => {

                }).catch(err => {

                })
            },
            getBlogTypes() {
                Vue.axios.get('http://localhost:8500/blogType/getAllType', {
                    params: {}
                }).then(res => {
                    this.blogTypes = res.data
                }).catch(err => {

                })
            }
        },
        mounted() {
            this.createEditor();
            this.getBlogTypes();
        }
    }
</script>

<style scoped>
    #blogEditor {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #blogEditor #editorBody {
        position: relative;
        height: 600px;
        border: 1px solid lightgreen;
    }

    #editorBody #toolbar {
        border: 1px solid lightgreen;
    }

    #editorBody #editor {
        position: relative;
        left: auto;
        right: auto;
        background-color: lightblue;

        height: 95%;
    }

    .ap {
        margin-top: 15px;
    }

    /*toolbar居中*/
    .w-e-toolbar {
        background-color: lightblue;
        justify-content: center;
        height: 5%;
    }
</style>